<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="false">
			<block slot="content">文章</block>
		</cu-custom>
		<tm-message ref="toast"></tm-message>
		<!-- 文章分类 -->
		<tm-sticky :top="stickyTop">
			<view class="grey text " style="position: static;top: 0;" :class="$tm.vx.state().tmVuetify.black ? 'black bk' : ''">
				<view class="shadow-5 white" :class="[$tm.vx.state().tmVuetify.black ? 'grey-darken-5' : '']">
					<tm-tabs color="bg-gradient-orange-lighten" v-model="categoryIndex" :list="categories"
						@change="onCategoryChange" range-key="categoryName" align="left"></tm-tabs>
				</view>
			</view>
		</tm-sticky>

		<!-- 文章列表 -->
		<view class="cu-card article no-card">
			<view class="cu-item shadow borderBottom" v-for="(item, index) in articles" :key="index" @click="handleArticleDetail(item.id)">
				<view class="title">
					<view class="text-cut text-bold text-lg">{{ item.articleTitle }}</view>
				</view>
				<view class="content">
					<!-- 封面 -->
					<image v-if="item.articleCover" :src="item.articleCover" mode="aspectFit"></image>
					<view class="desc">
						<view class="text-content">{{ item.articleContent }}</view>
						<!-- todo 文章内容 -->
						<view class="margin-top-xs"
							style="display: flex;align-items:center;justify-content: space-between;">
							<view class="text-gray light sm text-df round fl">{{item.createdTime | formatDate}}</view>
							<view>
								<view class="text-gray light sm round margin-lr-xs"
									style="display: inline-flex;align-items:center;">
									<text class="text-gray cuIcon-attentionfill text-df"
										style="margin-right: 6rpx;"></text>
									<text class="text-df" style="margin-top: 2rpx;">{{item.seeNum}}</text>
								</view>
								<view class="text-gray light sm round margin-lr-xs"
									style="display: inline-flex;align-items:center;">
									<text class="text-gray cuIcon-appreciatefill text-df"
										style="margin-right: 6rpx;"></text>
									<text class="text-df" style="margin-top: 2rpx;">{{item.likesNum}}</text>
								</view>
								<view class="text-gray light sm round" style="display: inline-flex;align-items:center;">
									<text class="text-gray cuIcon-share text-df" style="margin-right: 6rpx;"></text>
									<text class="text-df" style="margin-top: 2rpx;">{{item.commentNum}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 
				<view class="cu-item shadow borderBottom" v-for="(item, index) in newsList" :key="index"
					@click="goNews(item.id)">
					<view class="title">
						<view class="text-cut text-bold text-lg">{{item.title}}</view>
					</view>
					<view class="content">
						<image :src="item.img" mode="aspectFit"></image>
						<view class="desc">
							<view class="text-content">{{item.content}}</view>
							<view class="margin-top-xs"
								style="display: flex;align-items:center;justify-content: space-between;">
								<view class="text-gray light sm text-df round fl">{{item.createdAt | formatDate}}</view>
								<view>
									<view class="text-gray light sm round margin-lr-xs"
										style="display: inline-flex;align-items:center;">
										<text class="text-gray cuIcon-attentionfill text-df"
											style="margin-right: 6rpx;"></text>
										<text class="text-df" style="margin-top: 2rpx;">{{item.seeNum}}</text>
									</view>
									<view class="text-gray light sm round margin-lr-xs"
										style="display: inline-flex;align-items:center;">
										<text class="text-gray cuIcon-appreciatefill text-df"
											style="margin-right: 6rpx;"></text>
										<text class="text-df" style="margin-top: 2rpx;">{{item.likesNum}}</text>
									</view>
									<view class="text-gray light sm round" style="display: inline-flex;align-items:center;">
										<text class="text-gray cuIcon-share text-df" style="margin-right: 6rpx;"></text>
										<text class="text-df" style="margin-top: 2rpx;">{{item.commentNum}}</text>
									</view>
								</view>
							</view>
						</view>
					</view> -->
			</view>

			<view class="page-box" v-if="articles.length < 1">
				<view>
					<view class="centre">
						<image src="https://cdn.zhoukaiwen.com/noData1.png" mode="widthFix"></image>
						<view class="explain">
							暂无数据
							<view class="tips">可以去看看有其他</view>
						</view>
						<!-- <view class="btn">随便逛逛</view> -->
					</view>
				</view>
			</view>
		</view>
		<view style="width: 1rpx;height: 1px;"></view>
	</view>
</template>

<!-- 文章 -->
<script>
	import request from '@/common/request.js';
	import Vue from 'vue'
	import {
		getAllCategories
	} from '@/api/article/category.js';
	import {
		getAllArticles, getArticlesByCategoryId
	} from '@/api/article/article.js';
	import storage  from "@/utils/storage.js"
	import constant from "@/utils/constant.js"
	
	export default {
		data() {
			return {
				stickyTop: 45,
				requestStatus: false, // 事件防抖
				TabCur: 0,
				scrollLeft: 0,
				newsList: '',
				categoryIndex: 0,
				params: {
					categoryId: null
				},
				paging: {
					size: 10,
					total: 0,
					current: 1
				},
				loading: false,
				categories: [{id: 0, categoryName: '全部'}], // 顶部，文章分类集合
				articles: [],
				navTop: [{
						id: 1,
						title: '全部'
					},
					{
						id: 2,
						title: 'Web前端'
					},
					{
						id: 3,
						title: 'UI设计'
					},
					{
						id: 4,
						title: 'Node后台'
					},
					{
						id: 5,
						title: '面试精选'
					},
					{
						id: 6,
						title: '技术前沿'
					},
					{
						id: 7,
						title: '更多资讯'
					}
				]
			};
		},
		onLoad() {
			var that = this;
			uni.getSystemInfo({
				success: function(e) {
					// #ifndef MP
					Vue.prototype.StatusBar = e.statusBarHeight;
					if (e.platform == 'android') {
						that.stickyTop = e.statusBarHeight + 50;
					} else {
						that.stickyTop = e.statusBarHeight + 45;
					};
					// #endif
				}
			});
		},
		mounted() {
			this.getData();
			this.getCategories();
			this.fetchArticles();
		},
		filters: {
			formatDate(value) {
				if (value == undefined) {
					return;
				}
				// let date = new Date(value * 1000);
				let date = new Date(value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				// return y + '-' + MM + '-' + d; //年月日	 + ' ' + h + ':' + m
				return y + '-' + MM + '-' + d; //年月日时分秒
			}
		},
		methods: {
			// 查询所有分类
			async getCategories() {
				await getAllCategories().then(res => {
					if (res.code == 200) {
						this.categories.push(...res.data);
						storage.set(constant.article.category, res.data)
					}
				})
			},
			onCategoryChange(val) {
				this.paging.current = 1;
				this.params.categoryId = this.categories[val].id;
				this.scrollToTop();
				if (this.params.categoryId === 0) {
					this.fetchArticles() // 全部
				} else {
					this.fetchArticlesByCategoryId(this.categories[val].id) // 按分类查询
				}
			},
			async fetchArticles() {
				// reactiveData.haveArticles = false
				await getAllArticles({
					current: this.paging.current,
					size: this.paging.size
				}).then(({data}) => {
					if (data.records) {
						// data.data.records.forEach((item: any) => {
						// 	item.articleContent = md
						// 		.render(item.articleContent)
						// 		.replace(/<\/?[^>]*>/g, '')
						// 		.replace(/[|]*\n/, '')
						// 		.replace(/&npsp;/gi, '')
						// })
						this.articles = data.records;
						// articleStore.articles = data.data.records
						this.paging.total = data.count;
						// reactiveData.haveArticles = true
					}
				})
			},
			async fetchArticlesByCategoryId(categoryId) {
				await getArticlesByCategoryId({
						current: this.paging.current,
						size: this.paging.size,
						categoryId: categoryId
					}).then(({data}) => {
						// data.data.records.forEach((item: any) => {
						// 	item.articleContent = md
						// 		.render(item.articleContent)
						// 		.replace(/<\/?[^>]*>/g, '')
						// 		.replace(/[|]*\n/, '')
						// 		.replace(/&npsp;/gi, '')
						// })
						this.articles = data.records;
						// articleStore.articles = data.data.records
						this.paging.total = data.count
					})
			},
			// 滚动到顶部
			scrollToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			getData() {
				var type = this.navTop[this.TabCur].id;
				if (type == 1) {
					type = '';
				}
				let opts = {
					url: 'api/blog/list?searchTypeId=' + type,
					method: 'get'
				};
				this.$refs.toast.show({
					model: 'load',
					label: '加载中'
				})
				request.httpRequest(opts).then(res => {
					this.$refs.toast.hide();
					if (res.statusCode == 200) {
						this.newsList = res.data.data;
					} else {
						console.log('数据请求错误～');
					}
				});
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				if (this.requestStatus) { // 时间防抖：利用 return 终止函数继续运行
					return false;
				};
				this.requestStatus = true;
				setTimeout(() => {
					this.getData();
					this.requestStatus = false; // 模拟执行完毕，改变 requestStatus
				}, 300);

			},
			handleArticleDetail(id) {
				uni.navigateTo({
					url: '../article/detail?id=' + id,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.borderBottom {
		border-bottom: 1px solid #f2f2f2;
	}

	// 暂无数据
	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 300rpx;
			border-radius: 50%;
			margin: 0 auto;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, #1cbbb4 0%, #0081ff 100%);
		}
	}

	.nav .cu-item.cur {
		font-weight: 600;
	}
</style>